<template>
  <div id="bigBox">
    <ul id="chList">
      <h1>DEMO</h1>
      <h3>Arcgis API for JS</h3>
      <li class="feature">添加矢量服务数据</li>
      <li class="raster">添加栅格服务数据</li>
      <li class="wfs">添加WFS服务数据</li>
      <li class="wms">添加WMS服务数据</li>
      <li class="wmts">添加WMTS服务数据</li>
    </ul>
  </div>
  <div id="viewDiv"></div>
</template>
<link src="./main.css" />
<script>
import esriConfig from "@arcgis/core/config.js"
import Map from "@arcgis/core/Map.js"
import MapView from "@arcgis/core/views/MapView.js"
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"
import LayerList from "@arcgis/core/widgets/LayerList.js"
import Search from "@arcgis/core/widgets/Search.js"
import BasemapToggle from "@arcgis/core/widgets/BasemapToggle.js"
import MapImageLayer from "@arcgis/core/layers/MapImageLayer.js"
import WFSLayer from '@arcgis/core/layers/WFSLayer'
import WMSLayer from '@arcgis/core/layers/WMSLayer'
import WMTSLayer from '@arcgis/core/layers/WMTSLayer'



export default {
  name: 'App',
  async mounted() {
    esriConfig.apiKey = "AAPK3afc6ae2507c4da3ac21e0d88069dd35njZ7Xvx4rdjoQ5ejW-4bDny2MQGDYTMWdsZUZuu7vB7IjSZU081hqzW5-AhwhSS2";

    var map = new Map({
      basemap: "arcgis/topographic",
    });

    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [104.073176, 30.59603],
      zoom: 10,

    });
    //添加测试矢量图层
    var featureLayer01 = new FeatureLayer({
      url: "http://localhost:6080/arcgis/rest/services/test2/MapServer",
      title: "test_feature",
      visible: false
    });
    map.add(featureLayer01);
    //添加测试栅格图层
    var rasterLayer01 = new MapImageLayer({
      url: "http://localhost:6080/arcgis/rest/services/test6/MapServer",
      title: "test_raster",
      visible: false
    });
    map.add(rasterLayer01);
    //添加测试WFS图层
    var wfsLayer01 = new WFSLayer({
      url: "https://geobretagne.fr/geoserver/ows",
      title: "test_wfs",
      visible: false
    });
    map.add(wfsLayer01);
    //添加测试WMS图层
    var wmsLayer01 = new WMSLayer({
      url: "https://ows.terrestris.de/osm/service",
      title: "test_wms",
      visible: false,
      // sublayers: [{
      //   name: "OSM-WMS"
      // }]
    });
    map.add(wmsLayer01);
    // 添加测试WMTS图层
    // var wmtsLayer01 = new WMTSLayer({
    //   // url: "https://www.ign.es/wmts/ign-base",
    //   // url:"https://www.ign.es/wmts/mapa-raster",
    //   url:"http://192.168.1.96:9980/iotmapserver/tiler/service/wmts?tilematrix=EPSG%3A4326%3A13&layer=sde%3Adf_pqdltba&style=sde%3Adf_pqdltba&tilerow=2687&tilecol=12794&tilematrixset=EPSG%3A4326&format=image%2Fpng&service=WMTS&version=1.0.0&request=GetTile",
    //   title: "test_wmts",
    //   visible: false
    // });
    // map.add(wmtsLayer01);

    view.when(() => {
      var layerList = new LayerList({
        view: view,
        // listItemCreatedFunction: ll_action
      });
      view.ui.add(layerList, "top-right");
    })


    var search = new Search({
      view: view
    });
    view.ui.add(search, {
      position: "top-right",
      index: 0
    });

    var basemapToggle = new BasemapToggle({
      view: view,
      nextBasemap: "hybrid"
    });
    view.ui.add(basemapToggle, "bottom-right");

    view.ui.remove("zoom");
    view.ui.remove("attribution");

    // 添加featurelayer/ex:http://localhost:6080/arcgis/rest/services/test3/MapServer
    var addLayers = document.querySelectorAll("#chList li");

    var featureflag = 1;
    addLayers[0].addEventListener("click", function () {
      var url_feature = prompt("请输入矢量服务连接:(参考:https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/FeatureServer)");
      if (url_feature) {
        var title_feature = prompt("请输入矢量图层名称:");
        if (title_feature != '') {
          var featureLayer1 = new FeatureLayer({
            url: url_feature,
            title: title_feature
          });
          map.add(featureLayer1);
        }
        else {
          title_feature = "矢量图层" + featureflag;
          var featureLayer2 = new FeatureLayer({
            url: url_feature,
            title: title_feature
          });
          map.add(featureLayer2);
          featureflag++;
        }
      }
    });

    //添加rasterlayer/ex:http://localhost:6080/arcgis/rest/services/test5/MapServer
    var rasterflag = 1;
    addLayers[1].addEventListener("click", function () {
      var url_raster = prompt("请输入栅格服务连接:(参考:http://localhost:6080/arcgis/rest/services/test5/MapServer)");
      if (url_raster) {
        var title_raster = prompt("请输入栅格图层名称:");
        if (title_raster != '') {
          var rasterLayer1 = new MapImageLayer({
            url: url_raster,
            title: title_raster
          });
          map.add(rasterLayer1);
        }
        else {
          title_raster = "栅格图层" + rasterflag;
          var rasterLayer2 = new MapImageLayer({
            url: url_raster,
            title: title_raster
          });
          map.add(rasterLayer2);
          rasterflag++;
        }
      }
    });

    //添加WFSlayer/ex:https://geobretagne.fr/geoserver/sdis56/wfs
    var wfsflag = 1;
    addLayers[2].addEventListener("click", function () {
      var url_wfsfeature = prompt("请输入WFS服务连接:(参考:https://geobretagne.fr/geoserver/sdis56/wfs)");
      if (url_wfsfeature) {
        var wfsNameList = url_wfsfeature.split('%3A');
        var wfsName = wfsNameList[1];
        var title_wfsfeature = prompt("请输入WFS图层名称:");
        if (title_wfsfeature != '') {
          var wfsLayer1 = new WFSLayer({
            url: url_wfsfeature,
            title: title_wfsfeature,
            name: wfsName
          });
          map.add(wfsLayer1);
        }
        else {
          title_wfsfeature = "WFS图层" + wfsflag;
          var wfsLayer2 = new WFSLayer({
            url: url_wfsfeature,
            title: title_wfsfeature,
            name: wfsName
          });
          map.add(wfsLayer2);
          wfsflag++;
        }
      }
    });

    //添加WMSlayer/ex:https://ows.terrestris.de/osm-gray/service
    var wmsflag = 1;
    addLayers[3].addEventListener("click", function () {
      var url_wmsfeature = prompt("请输入WMS服务连接:(参考:https://ows.terrestris.de/osm-gray/service)");
      if (url_wmsfeature) {
        var title_wmsfeature = prompt("请输入WMS图层名称:");
        var wmsNameList = url_wmsfeature.split('%3A');
        var wmsName = wmsNameList[1];
        if (title_wmsfeature != '') {
          var wmsLayer1 = new WMSLayer({
            url: url_wmsfeature,
            title: title_wmsfeature,
            sublayers: [{
              name: wmsName
            }]
          });
          map.add(wmsLayer1);
        }
        else {
          title_wmsfeature = "WMS图层" + wmsflag;
          var wmsLayer2 = new WMSLayer({
            url: url_wmsfeature,
            title: title_wmsfeature,
            sublayers: [{
              name: wmsName
            }]
          });
          map.add(wmsLayer2);
          wmsflag++;
        }
      }
    });

    //添加WMTSlayer/ex:https://www.ign.es/wmts/mapa-raster
    var wmtsFlag = 1;
    addLayers[4].addEventListener("click", function () {
      var url_wmtsfeature = prompt("请输入WMTS服务连接:(参考:https://www.ign.es/wmts/mapa-raster)");
      if (url_wmtsfeature) {
        var title_wmtsfeature = prompt("请输入WMTS图层名称：");
        if (title_wmtsfeature != '') {
          var wmtsLayer1 = new WMTSLayer({
            url: url_wmtsfeature,
            title: title_wmtsfeature
          });
          map.add(wmtsLayer1);
        }
        else {
          title_wmtsfeature = "WMTS图层" + wmtsFlag;
          var wmtsLayer2 = new WMTSLayer({
            url: url_wmtsfeature,
            title: title_wmtsfeature
          });
          map.add(wmtsLayer2);
          wmtsFlag++;
        }
      }
    });
  }

}

</script>

<style></style>
